<template>
	<div class="content">
		<van-nav-bar
			fixed
			left-arrow
			placeholder
			left-text="返回"
			title="工资条历史"
			@click-left="onClickLeft"
		></van-nav-bar>

		<van-collapse v-model="activeName" accordion right-icon="play">
			<van-collapse-item :title="`201${item}年`" :name="item" v-for="item in list" :key="item">
				<ul>
					<li class="van-hairline--bottom" v-for="item in 3" :key="item">
						<div class="van-hairline--bottom flex-between">
							<span>{{ '2019年5月薪资' }}</span>
							<div>
								<van-button
									class="confirm-status"
									hairline
									round
									size="mini"
									:color="true ? '#4a6573' : '#999999'"
								>
									{{ true ? ' 确认 ' : ' 已确认 ' }}
								</van-button>
								<van-icon @click="handleToContent" name="arrow" class="vertical-middle" />
							</div>
						</div>
						<div class="flex-between flex-items-center">
							<span class="amount px16">
								实发金额：
								<i>{{ 1999.99 }}</i>
							</span>
							<span class="px12">2019-05-10 23:59:59</span>
						</div>
					</li>
				</ul>
			</van-collapse-item>
		</van-collapse>
		<van-empty v-if="list === 0" description="薪酬管理员暂无给您发工资哦">
			<van-button
				round
				type="primary"
				color="#4a6573"
				class="bottom-button"
				@click="$router.go(-1)"
			>
				返回
			</van-button>
		</van-empty>
	</div>
</template>

<script>
export default {
	name: 'PaySlipHistory',
	data() {
		return {
			id: this.$route.query.id ?? null,
			list: 10,
			activeName: '1'
		}
	},
	mounted() {},
	activated() {},
	methods: {
		onClickLeft() {
			this.$router.push({ name: 'PaySlipContent' })
		},
		handleToContent() {
			this.$router.push({ path: 'paySlipContent', query: { id: 123 } })
		}
	}
}
</script>

<style lang="less" scoped>
@import '@/style/global.less';
.content {
	.van-collapse {
		.van-collapse-item {
			margin: 16px 0;
			/deep/ .van-collapse-item__content {
				padding: 0;
				ul li {
					padding: 10px 0;
					padding-left: 20px;
					border-top: 8px solid @background-color;
					& > div {
						line-height: 60px;
						padding-right: 20px;
						.confirm-status {
							padding: 10px;
						}
						.amount {
							color: @main-color;
						}
						.vertical-middle {
							margin-left: 8px;
						}
					}
				}
			}
		}
	}
	.van-empty {
		height: calc(100vh - 46px);
		margin: auto;
		.bottom-button {
			width: 240px;
		}
	}
}
</style>
